<template>
	<div class="page">
		<div class="p-10 system-page-background b-radius-4">
			<my-form
				inline
				query
				label-width="70px"
				:model="queryParams"
				:formItem="[
					{ prop: 'likeJobCode', label: '任务编号' },
					{ prop: 'likeJobName', label: '任务名称' },
					{ prop: 'likeJobGroup', label: '任务分组' },
					{
						itemType: 'select',
						list: Tasklist,
						prop: 'invokeTarget',
						label: '任务目标'
					}
				]"
				:searchFn="() => refTable.reload()"
			/>
		</div>
		<div class="flex-auto flex-col system-page-background m-t-10 b-radius-4">
			<div class="p-10" v-hasPermi="['secrecy:config:add', 'secrecy:config:remove']">
				<el-button type="primary" @click="insertFn()" icon="Plus" v-hasPermi="['secrecy:config:add']">新增</el-button>
				<el-button
					type="danger"
					:disabled="!tableSelection.length"
					@click="deleteFn(tableSelection)"
					icon="Delete"
					v-hasPermi="['secrecy:config:remove']"
				>
					删除
				</el-button>
			</div>
			<my-list-panel ref="refTable" :total="state.total" :loadFn="loadData">
				<my-table :data="state.list" :columns="state.columns" @selection-change="(val) => (tableSelection = val)">
					<template #concurrent="{ row }">
						<el-switch
							v-model="row.concurrent"
							inline-prompt
							:active-value="1"
							:inactive-value="0"
							active-text="是"
							inactive-text="否"
							@change="changeFn(row, row.concurrent === 1 ? '允许并发' : '不允许并发', 'concurrent')"
						/>
					</template>
					<template #saveLog="{ row }">
						<el-switch
							v-model="row.saveLog"
							inline-prompt
							:active-value="1"
							:inactive-value="0"
							active-text="是"
							inactive-text="否"
							@change="changeFn(row, row.saveLog === 1 ? '保存日志' : '不保存日志', 'saveLog')"
						/>
					</template>
					<template #status="{ row }">
						<el-switch
							v-model="row.status"
							inline-prompt
							:active-value="0"
							:inactive-value="1"
							active-text="启"
							inactive-text="停"
							@change="changeFn(row, row.status === 0 ? '启动' : '停止', 'status')"
						/>
					</template>
					<template #default="{ row }">
						<my-button-text @click="onceJobFn(row)">执行一次</my-button-text>
						<my-button-text @click="detailFn(row)">查看</my-button-text>
						<my-button-text @click="updateFn(row)" v-hasPermi="['secrecy:config:edit']">修改</my-button-text>
						<my-button-text @click="deleteFn(row)" v-hasPermi="['secrecy:config:remove']">删除</my-button-text>
					</template>
				</my-table>
			</my-list-panel>
		</div>
		<!-- 添加或修改部门对话框 -->
		<el-dialog
			:title="dialogTitle"
			v-model="dialog.open"
			width="450px"
			:close-on-click-modal="false"
			append-to-body
			@closed="resetForm(refDialogForm)"
		>
			<my-form
				ref="refDialogForm"
				:model="dialog.form"
				label-width="95px"
				:disabled="['detail'].includes(dialog.name)"
				:formItem="[
					{
						prop: 'jobCode',
						label: '任务编号',
						required: true,
						col: { span: 24 }
					},
					{
						prop: 'jobName',
						label: '任务名称',
						required: true,
						col: { span: 24 }
					},
					{
						prop: 'jobGroup',
						label: '任务分组',
						required: true,
						col: { span: 24 }
					},
					{
						itemType: 'select',
						list: Tasklist,
						prop: 'invokeTarget',
						label: '任务目标',
						required: true,
						col: { span: 24 }
					},
					{
						prop: 'cronExpression',
						label: '执行表达式',
						required: true,
						col: { span: 24 }
					},
					{ prop: 'concurrent', label: '是否并发', col: { span: 8 } },
					{ prop: 'saveLog', label: '保存日志', col: { span: 8 } },
					{ prop: 'status', label: '状态', col: { span: 8 } },
					{
						prop: 'remark',
						label: '备注',
						type: 'textarea',
						col: { span: 24 }
					}
				]"
			>
				<template #cronExpression="{ model, prop }">
					<el-popover :width="600" v-model:visible="cronPopover" trigger="manual">
						<my-cron
							:cron-value="model[prop]"
							@change="
								(val) => {
									if (typeof val !== 'string') return false;
									model[prop] = val;
								}
							"
							@close="cronPopover = false"
							max-height="228px"
							i18n="cn"
						/>
						<template #reference>
							<my-input v-model="model[prop]" @click="cronPopover = true" placeholder="cron表达式..." clearable> </my-input>
						</template>
					</el-popover>
				</template>
				<template #concurrent="{ model, prop }">
					<el-switch v-model="model[prop]" inline-prompt :active-value="1" :inactive-value="0" active-text="是" inactive-text="否" />
				</template>
				<template #saveLog="{ model, prop }">
					<el-switch v-model="model[prop]" inline-prompt :active-value="1" :inactive-value="0" active-text="是" inactive-text="否" />
				</template>
				<template #status="{ model, prop }">
					<el-switch v-model="model[prop]" inline-prompt :active-value="0" :inactive-value="1" active-text="启" inactive-text="停" />
				</template>
			</my-form>
			<template #footer>
				<el-button @click.prevent="dialog.open = false">取消</el-button>
				<el-button type="primary" @click.prevent="dialogSubmitFn()">确定</el-button>
			</template>
		</el-dialog>
	</div>
</template>

<script setup name="system/job">
/********************************************************** my-cron表达式 ***********************************************************/
const cronPopover = ref(false);

/********************************************************** 表格增删改查 ***********************************************************/
import { onceJob, listJobTask, addJob as add, removeJob as remove, editJob as edit, pageJob as page } from '@/api/system';

const columns = [
	{
		type: 'selection'
	},
	{
		label: '任务编号',
		prop: 'jobCode'
	},
	{
		label: '任务名称',
		prop: 'jobName'
	},
	{
		prop: 'jobGroup',
		label: '任务分组'
	},
	{
		label: '任务目标',
		prop: 'invokeTarget',
		formatter: (row) => selectDictLabel(Tasklist.value, row.invokeTarget)
	},
	{
		label: '执行表达式',
		prop: 'cronExpression'
	},
	{
		label: '是否并发',
		prop: 'concurrent'
	},
	{
		label: '保存日志',
		prop: 'saveLog'
	},
	{
		label: '状态',
		prop: 'status'
	},
	{
		label: '创建时间',
		prop: 'createTime',
		width: 160,
		align: 'center'
	},
	{
		label: '备注',
		prop: 'remark',
		align: 'center'
	},
	{
		label: '操作',
		width: '240',
		align: 'center'
	}
];

const {
	queryParams,
	refTable,
	state,
	refDialogForm,
	tableSelection,
	dialog,
	dialogTitle,
	loadData,
	insertFn,
	deleteFn,
	updateFn,
	detailFn,
	dialogSubmitFn
} = pageMixin({
	columns,
	api: { page, remove, add, edit },
	dialogDefault: {
		title: '定时任务',
		form: {
			id: undefined,
			status: 0,
			concurrent: 0,
			misfirePolicy: 2,
			saveLog: 0
		}
	}
});

/****************************************************更改状态逻辑  隐藏、显示，是否并发，是否日志**************************************************/
function changeFn(row, text, key) {
	if (row.id) {
		confirm(`确认要—${text}（${row.jobName}）任务吗?`)
			.then(() => edit(row))
			.then(() => {
				msgSuccess(text + '成功');
				loadData();
			})
			.catch(function () {
				row[key] = row[key] == 0 ? 1 : 0;
				msgInfo('已取消！');
			});
	}
}

/****************************************************************立即执行一次**************************************************************/
function onceJobFn({ jobCode, jobGroup }) {
	onceJob({ jobCode, jobGroup }).then(() => {
		msgSuccess('执行成功！');
	});
}

/*****************************************************************任务目标数据**************************************************************/
const Tasklist = ref([]);
listJobTask().then((res) => {
	Tasklist.value = res.data.map((item) => ({
		dictLabel: item.label,
		dictValue: item.value
	}));
});
</script>
